var vue_func = new Vue({
    el: "#category",
    data: {
        categories: [],
        checkedNames: [],
        // data: []
    },
    mounted: function () {
        this.getCategory();//需要触发的函数
    },
    methods: {
        //获得商品分类
        getCategory: function () {
            var key = getQueryVariable("key");
            if (!key) key='';
            axios({
                url: "/product/category?key="+key,
                method: "get",
                data: {},
                headers: {
                    "Content-Type": "application/json"
                }
            }).then(function (response) {
                vue_func.categories = response.data.data;
            }).catch(function (error) {
                alert("服务器异常");
            });
        },
        step: function (i) {
            return "forId_" + i
        },
        toProductList: function () {
            vue_func1.product_list();
        }
    }
});
var vue_func1 = new Vue({
    el: "#productList",
    data: {
        data: [],
        flag: false
    },
    mounted: function () {
        this.init_product_list();
    },
    methods: {
        //初始化商品列表页
        init_product_list: function () {
            var key = getQueryVariable("key");
            if (!key) key = "";
            axios({
                url: "/product/select",
                method: "post",
                data: {
                    "id_arr": "[]",
                    "pageNum": 1,
                    "sort_flag": 0,
                    "key": key
                },
                headers: {
                    "Content-Type": "application/json"
                }
            }).then(function (response) {
                if (response.data.code == 200) {
                    vue_func1.data = response.data.data;
                    vue_page_func.data = response.data.data;
                    num_all.data = response.data.data;
                } else {
                    alert(response.data.message)
                }
            }).catch(function (error) {
                alert("服务器异常");
            });
        },
        //根据条件筛选商品列表页
        product_list: function () {
            var key = getQueryVariable("key");
            if (!key) key = "";
            axios({
                url: "/product/select",
                method: "post",
                data: {
                    "id_arr": vue_func.checkedNames,
                    "pageNum": 1,
                    "sort_flag": 0,
                    "key": key
                },
                headers: {
                    "Content-Type": "application/json"
                }
            }).then(function (response) {
                if (response.data.code == 200) {
                    vue_func1.data = response.data.data;
                    vue_page_func.data = response.data.data;
                    num_all.data = response.data.data;
                } else {
                    window.location.href = "/view/other/404.html";
                }
            }).catch(function (error) {
                alert("服务器异常");
            });
        },
        //根据商品ID查询商品信息
        productId: function (id) {
            axios.get("/product/id/" + id, {
                params: {"pageNum": 1},
            }).then((response) => {
                if (response.data.code == 200) {
                    quick_view.product = response.data.data;
                    var html1 = '';
                    var html2 = '';
                    for (var i = 0; i < response.data.data.pics.length; i++) {
                        html1 += "<div class=\"pro-large-img\"><img src=\"" + response.data.data.pics[i].path + "\" alt=\"加载失败\" /></div>";
                        html2 += "  <div class=\"pro-nav-thumb\"><img src=\"" + response.data.data.pics[i].path + "\" alt=\"加载失败\" /></div>";
                    }
                    document.getElementById('imgFormat').innerHTML = "<div class=\"product-large-slider\">" + html1 + "</div>" + "<div class=\"pro-nav slick-row-10 slick-arrow-style\" >" + html2 + "</div>";
                } else {
                    window.location.href = "/view/other/404.html";
                }
            }).then(function () {
                $('.product-large-slider').not('.slick-initialized').slick({
                    fade: true,
                    arrows: false,
                    asNavFor: '.pro-nav'
                });
                // product details slider nav active
                $('.pro-nav').not('.slick-initialized').slick({
                    slidesToShow: 4,
                    asNavFor: '.product-large-slider',
                    centerMode: true,
                    arrows: false,
                    rtl: true,
                    centerPadding: 0,
                    focusOnSelect: true,
                    responsive: [{
                        breakpoint: 576,
                        settings: {
                            slidesToShow: 3,
                        }
                    }]
                });
                if (vue_func1.flag == false) {
                    $('.pro-qty').prepend('<span class="dec qtybtn">-</span>');
                    $('.pro-qty').append('<span class="inc qtybtn">+</span>');
                    $('.qtybtn').on('click', function () {
                        var $button = $(this);
                        var oldValue = $button.parent().find('input').val();
                        if ($button.hasClass('inc')) {
                            var newVal = parseFloat(oldValue) + 1;
                        } else {
                            // Don't allow decrementing below zero
                            if (oldValue > 1) {
                                var newVal = parseFloat(oldValue) - 1;
                            } else {
                                newVal = 1;
                            }
                        }
                        $button.parent().find('input').val(newVal);
                    });
                    vue_func1.flag = true;
                }


            }).catch(function (error) {
                alert(error);
            });
        },
        addCart: function (id,num) {
            var cart = handleLocalStorage("get", "cart");
            var flag = false;
            if (!cart) {
                var item = id + "-" + num + ",";
                handleLocalStorage("set", "cart", item);
            } else {
                //cart=cart.substring(0,cart.length-1);
                var arr = cart.split(',');
                var arrItem;
                for (var i = 0; i < arr.length - 1; i++) {
                    arrItem = arr[i].split("-");
                    if (arrItem[0] == id) {
                        arrItem[1] = parseInt(arrItem[1]) + num;
                        arr[i] = arrItem[0] + "-" + arrItem[1];
                        handleLocalStorage("set", "cart", arr);
                        flag = true;
                    }
                }
                if (!flag) {
                    cart = cart + id + "-" + num + ",";
                    handleLocalStorage("set", "cart", cart);
                }
            }
            cart_view.getCart();
            alert("添加购物车成功！")
        }
    }
});
var vue_page_func = new Vue({
    el: "#page",
    data: {
        data: [],
        page_sort_flag: 0
    },
    methods: {
        //点击页码查询
        btnClick: function (index) {
            var key = getQueryVariable("key");
            if (!key) key = "";
            if (index != vue_page_func.data.pageNum) {
                axios({
                    url: "/product/select",
                    method: "post",
                    data: {
                        "id_arr": vue_func.checkedNames,
                        "pageNum": index,
                        "sort_flag": vue_page_func.page_sort_flag,
                        "key": key
                    },
                    headers: {
                        "Content-Type": "application/json"
                    }
                }).then(function (response) {
                    if (response.data.code == 200) {
                        vue_func1.data = response.data.data;
                        vue_page_func.data = response.data.data;
                        num_all.data = response.data.data;
                    } else {
                        window.location.href = "/view/other/404.html";
                    }
                }).catch(function (error) {
                    alert("服务器异常");
                });
            }
        }
    }
});
var num_all = new Vue({
    el: "#count",
    data: {
        data: []
    }
});


var sort_func = new Vue({
    el: "#sort",
    data: {
        sort_flag: ""
    },
    methods: {
        //商品排序
        sortByValue: function () {
            if (sort_func.sort_flag == '') {
                return;
            }
            var key = getQueryVariable("key");
            if (!key) key = "";
            axios({
                url: "/product/select",
                method: "post",
                data: {
                    "id_arr": vue_func.checkedNames,
                    "pageNum": 1,
                    "sort_flag": parseInt(sort_func.sort_flag),
                    "key": key
                },
                headers: {
                    "Content-Type": "application/json"
                }
            }).then(function (response) {
                if (response.data.code == 200) {
                    vue_func1.data = response.data.data;
                    vue_page_func.data = response.data.data;
                    num_all.data = response.data.data;
                    vue_page_func.page_sort_flag = parseInt(sort_func.sort_flag);
                } else {
                    window.location.href = "/view/other/404.html";
                }
            }).catch(function (error) {
                alert("服务器异常");
            });
        }

    }
});
var quick_view = new Vue({
    el: "#quick_view",
    data: {
        product: []
    },
    methods: {
        removeHtml: function () {
            document.getElementById('imgFormat').innerHTML = "";
        },
        add_cart:function (id) {
            var num=$("#product_num").val();
            vue_func1.addCart(id,parseInt(num));
        }
    }
});


